<template>
	<div class="wrap">
		<v-top :top="top"></v-top>
		<section class="main">
			<ul class="tabTitle">
				<li v-for="(item,index) in tab" :class="{'on' : item.on}" @click="tabSwitch(index)">{{ item.title }}</li>
			</ul>
			<ul class="borrowList">
				<li v-for="item in list" v-if="item.status">
					<p class="w60P">编号 <span>{{ item.num }}</span></p>
					<p>项目状态 <span class="blue">{{ item.state }}</span></p>
					<p class="w60P">申请金额 <span>{{ item.money }}</span></p>
					<p>借款期限 <span>{{ item.term }}</span></p>
				</li>
			</ul>
		</section>
	</div>
</template>

<script>
import vTop from './public/subTop'
export default {
   	data() {
      	return {
      		top : [
      			'我的借款'
      		],
			tab : [
				{
					title : '全部',
					on : true
				},
				{
					title : '申请中',
					on : false
				},
				{
					title : '待归还',
					on : false
				},
				{
					title : '已结束',
					on : false
				},
			],
			list : [
				{
					num : '20161213000003',
					state : '审核中',
					money : '1200000元',
					term : '180天',
					status : true
				},
				{
					num : '20161213000004',
					state : '待归还',
					money : '1200000元',
					term : '180天',
					status : true
				},
				{
					num : '20161213000005',
					state : '已结束',
					money : '1200000元',
					term : '180天',
					status : true
				},
				{
					num : '20161213000006',
					state : '已结束',
					money : '1200000元',
					term : '180天',
					status : true
				},
				{
					num : '20161213000007',
					state : '待归还',
					money : '1200000元',
					term : '180天',
					status : true
				},
				{
					num : '20161213000008',
					state : '审核中',
					money : '1200000元',
					term : '180天',
					status : true
				},
				{
					num : '20161213000009',
					state : '已结束',
					money : '1200000元',
					term : '180天',
					status : true
				}
			]
      	}
   	},
   	methods : {
   		tabSwitch (iNow){

   			for (var i = 0; i < this.tab.length; i++) {
   				this.tab[i].on = false;
   			}
   			for (var i = 0; i < this.list.length; i++) {
   				this.list[i].status = false;
   			}
   			this.tab[iNow].on = true;

   			if (iNow == 0) {
   				for (var i = 0; i < this.list.length; i++) {
	   				this.list[i].status = true;
	   			}
   			}else if(iNow == 1){
   				for (var i = 0; i < this.list.length; i++) {
	   				if(this.list[i].state == '审核中') {
	   					this.list[i].status = true;	
	   				}
	   			}
   			}else if(iNow == 2){
   				for (var i = 0; i < this.list.length; i++) {
	   				if(this.list[i].state == '待归还') {
	   					this.list[i].status = true;	
	   				}
	   			}
   			}else if(iNow == 3){
   				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].state == '已结束') {
	   					this.list[i].status = true;	
	   				}
	   			}
   			}

   		}
   	},
   	created() {
   		this.$store.commit('sum',this.list.length); 
   	},
   	components : {
   		vTop
   	}
}
</script>

<style lang="">
	.tabTitle{height:0.38rem; width:100%; line-height: 0.38rem; font-size: 0.13rem; background: #fff; overflow: hidden; border-bottom: 1px solid #ccc; text-align:center;}
	.tabTitle li{display: inline-block; height: 0.34rem; line-height: 0.34rem; width:25%; cursor: pointer;}
	.tabTitle .on{border-bottom:0.04rem solid #3297fd;}
	.borrowList{font-size: 0.12rem;}
	.borrowList li{margin-top:0.1rem;overflow: hidden; padding: 2% 3%; cursor: pointer; background: #fff; }
	.borrowList li .w60P{width:60%;}
	.borrowList li p{width:40%; float: left; line-height: 0.24rem; color: #333;}
	.borrowList li .blue{color:#3297fd;}
</style>
